<template>
  <div>
    <span class="title">周末去哪儿</span>
    <ul>
      <li class="item " v-for="item of list" :key="item.id" >
        <div class="item-img-wrapper">
          <img class="item-img"  :src="item.imgUrl" alt="">
        </div>
          <div class="product-info">
            <p class="p-title">{{item.title}}</p>
            <p class="p-desc">{{item.desc}}</p>
          </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  @import "~styles/ellipsis.styl"
    .title
      height: .8rem;
      padding-left: .26rem;
      line-height: .8rem;
    .item
      background white
      .item-img-wrapper
        overflow hidden
        height 0
        padding-bottom 36.643835%
        .item-img
          width 100%
      .product-info
        padding: .14rem .2rem .2rem .2rem;
        .p-title
          overflow: hidden;
          padding-right: 1.4rem;
          color: #212121;
          font-size: .28rem;
          line-height: .48rem;
          ellipsis()
        .p-desc
          overflow: hidden;
          padding-right: 1.4rem;
          color: #616161;
          font-size: .24rem;
          line-height: .42rem;
          ellipsis()
</style>
